<template>
  <div class="home">
    <div class="canvas-container" ref="canvasDom"></div>
  </div>
</template>

<script setup>
import * as THREE from 'three'
import { ref, onMounted } from 'vue'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

const canvasDom = ref(null)
// 场景
const scene = new THREE.Scene()
// 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth / 1.5, window.innerHeight / 1.5)
// 镜头
const camera = new THREE.PerspectiveCamera(35, (window.innerWidth / window.innerHeight), 0.1, 1000)
camera.position.set(0, 0, 60)
const controls = new OrbitControls(camera, renderer.domElement)
// 渲染函数
const render = () => {
  renderer.render(scene, camera)
  controls.update()
  requestAnimationFrame(render)
}
//灯光
const light1 = new THREE.DirectionalLight(0xffffff, 1)
light1.position.set(0, 0, 10)
scene.add(light1)
const light2 = new THREE.DirectionalLight(0xffffff, 1);
light2.position.set(0, 0, -10);
scene.add(light2);
const light3 = new THREE.DirectionalLight(0xffffff, 1);
light3.position.set(10, 0, 0);
scene.add(light3);
const light4 = new THREE.DirectionalLight(0xffffff, 1);
light4.position.set(-10, 0, 0);
scene.add(light4);
const light5 = new THREE.DirectionalLight(0xffffff, 1);
light5.position.set(0, 10, 0);
scene.add(light5);
const light6 = new THREE.DirectionalLight(0xffffff, 0.3);
light6.position.set(5, 10, 0);
scene.add(light6);
const light7 = new THREE.DirectionalLight(0xffffff, 0.3);
light7.position.set(0, 10, 5);
scene.add(light7);
const light8 = new THREE.DirectionalLight(0xffffff, 0.3);
light8.position.set(0, 10, -5);
scene.add(light8);
const light9 = new THREE.DirectionalLight(0xffffff, 0.3);
light9.position.set(-5, 10, 0);
scene.add(light9);
onMounted(() => {
  // 渲染
  canvasDom.value.appendChild(renderer.domElement)
  renderer.setClearColor(0xffffff)
  render()

  //加载gltf模型
  const loader = new GLTFLoader()
  const dracoloader = new DRACOLoader()
  dracoloader.setDecoderPath('./draco/')
  dracoloader.preload()
  loader.setDRACOLoader(dracoloader)
  loader.load('./model/龙猫.glb', (gltf) => {
    const lm = gltf.scene
    lm.position.set(0, -10, 0)
    scene.add(lm)//整个模型组添加到场景中
  })
})

</script>

<style lang="css" scoped></style>